
<template>
  <div class="div_flex-column">
    <img class="logo_position" src="@/assets/icons/logo2.png" />
    <div class="slogan">知你所求，引你所向，解你所惑，指你所行，领你所进</div>
    <!-- 放卡片 flex 布局 -->
    <div class="div_flex-row">
      <introduce-card toURL="/search">
        <template #img>
          <img src="../assets/icons/search.png" alt="" class="cardImg" />
        </template>
        <template #title> 导师检索 </template>
        <template #subtitle> 挖掘专业资源，点亮学术之光 </template>
      </introduce-card>
      <introduce-card toURL="/recommand">
        <template #img>
          <img src="../assets/icons/creation.png" alt="" class="cardImg" />
        </template>
        <template #title> 导师推荐 </template>
        <template #subtitle> 指引学术之路，探索知识海洋 </template>
      </introduce-card>
    </div>
  </div>
</template>

<script lang="ts">
import IntroduceCard from '../components/IntroduceCard.vue'
export default({
  name: 'homeView',
  components:{
    IntroduceCard
  }
})
</script>

<style lang="scss" scoped>
.logo_position {
  margin-top: 5%;
  margin-bottom: 3vh;
  width: 12%;
}

.div_flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 92vh;
}

.div_flex-row {
  width: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.slogan {
  font-family:阿里妈妈东方大楷;
  font-size: 42px;
  color: #4a5155;
  font-weight: 400;
  margin-bottom: 12vh;
}

.cardImg {
  width: 30%;
  position: absolute;
  left: 10%;
  top: -10%;
}
</style>